<!-- Hot组件 -->
<template>
  <div class="hot_container">
      <div class="title">
          <div class="title_left">
              <img src="../../../public/image/barIcons/fire.png" alt="" >
              <span>本周热门榜单</span>
          </div>
          <div class="title_right">
              <span>全部榜单 ></span>
          </div>
      </div>
      <ul class="hot_list" >
          <li class="hot_item" v-for="item in hotList" :key="item.id">
              <img :src="item.url" alt="">
              <p>{{item.name}}</p>
              <p>
                  <span class="hot_mark">￥{{item.price}}</span>起
              </p>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
        hotList: [
            {
                id:1,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2F10030v000000jvx8xDA57.jpg&refer=http%3A%2F%2Fyouimg1.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639665330&t=4e68c5f100a775c5b041e6892c86e4de',
                name:'宽窄巷子',
                price:'20'
            },
            {
                id:2,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd3%2F1706%2F14%2F0f4373109d2cb4b5.jpg_r_680x453x95_1c083c74.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639666915&t=2b1de54325c85ec813bb719f5506c0fc',
                name:'都江堰',
                price:'35'
            },
            {
                id:3,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdujia.people.com.cn%2FNMediaFile%2F2014%2F1020%2FMAIN201410201616000443902706242.jpg&refer=http%3A%2F%2Fdujia.people.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639666999&t=4f9e04d5ec7db9435d5238b9ea896fba',
                name:'九寨沟',
                price:'30'
            },
            {
                id:4,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1312%2F29%2Fc3%2F30107830_1388306674126.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639667050&t=758daae19317ca4852afde88759cfd1e',
                name:'冬韵',
                price:'55'
            },
            {
                id:5,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdimg02.c-ctrip.com%2Fimages%2Ftg%2F743%2F099%2F976%2Fa1cd61eb43634fb58dd3c81901c9543b_C_1600_1200.jpg&refer=http%3A%2F%2Fdimg02.c-ctrip.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639667217&t=cf75684a5e6e45986744bd91a0c451fe',
                name:'五彩池',
                price:'28'
            },
            {
                id:6,
                url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbbs.qn.img-space.com%2Fg2%2FM00%2F08%2FC3%2FCg-4klmOz6qIZhyGADlHHG2VfgYAANdsQFU0qAAOUc0193.jpg%3FimageView2%2F2%2Fw%2F1800%2Fq%2F90%2Fignore-error%2F1%2F&refer=http%3A%2F%2Fbbs.qn.img-space.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639667217&t=e19e5db3934b5534365f4f46c254b172',
                name:'漫天紫霞',
                price:'88'
            },
        ]
    };
  },


}

</script>
<style lang='less' scoped>
    .hot_container{
        width: 100%;
        background-color: #fff;
        position: relative;
        .title{
            height: .6rem;
            line-height: .6rem;
            .title_left{
                font-size: .25rem;
                font-weight: 700;
                //小图标
                img{
                    height: .4rem;
                    width: .4rem;
                    margin-top: -.15rem;
                }
            }
            .title_right{
                font-size: .2rem;
                position: absolute;
                right: .2rem;
                top: .1rem;
            }
        }
    }
    .hot_list{
        height: 3.1rem;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        .hot_item{
            width: 2.15rem;
            height: 3rem;
            padding: 0 .1rem;
            font-size: .25rem;
            text-align: center;
            font-weight: 700;
            display: inline-block;
            white-space: nowrap;
            .hot_mark {
                color: #ff8300;
                font-size: .32rem;
                margin-left: -.1rem;
            }
        }
    }
    .hot_list img{
        width: 100%;
        height: 68%;
    }
    .hot_list p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .hot_list p:first-of-type{
        margin-top: .1rem;
    }
</style>